<docs>
  ## 我的
</docs>
<template>
    <!-- 内边距container 开始 -->
    <div class="container " ref="user" :style="{minHeight: winHeight}">
      <div class="my_pic">
        <div class="picL">
          <img class="per_pic" :src="imgSrc" alt />
        </div>
        <div class="picR">
          <img class="baseNews" src="~common/images/user/shezhi.png" alt="" @click="editDetail">
          <p>{{dwxx.dwmc}}</p>
          <p>
            <span class="name overflow">{{dwxx.dwjbr|| '**'}}</span>
            <span class="tel overflow">{{dwxx.lxdh}} </span>
          </p>
        </div>
      </div>
      <div class="iContent">
        <div class="firstMode">
          <p class="myjl1">我的测评</p>
          <div class="test">
            <span class="test_item item1" @click="link">面试工具</span>
            <span class="test_item item2" @click="link">笔试工具</span>
            <span class="test_item item3" @click="link">诊断工具</span>
          </div>
        </div>
        <div tag="div" class="my_title" @click="link">
          <p class="myjl2">我的指导</p>
        </div>
        <div tag="div" class="my_title" @click="link">
          <p class="myjl3">我的招聘会</p>
        </div>
        <div tag="div" class="my_title" @click="link">
          <p class="myjl4">企业政策</p>
        </div>
        <div tag="div" class="my_title" @click="link">
          <p class="myjl5">我的其他业务</p>
        </div>
        <!-- <div class="signOut" @click="signOut">退出登录</div> -->
      </div>
    </div>
</template>
<script>
import $ from "@/common/js/axios";

export default {
  name: "user",
  data() {
    return {
      winHeight: "",
      show:true,
      changFlag: 1,
      dwxx: {
      }
    };
  },
  computed: {
    imgSrc() {
      if (this.dwxx.logo) {
        return `${conf.urlPrefix}/dwgl/showPicture?logo=`+this.dwxx.logo;
      }else{
        return '~common/images/user/logo.png'
      }
      /* eslint-disable no-undef */
    }
  },
  methods: {
    // 退出
    signOut(){
      // window.location.href = './login.html'
      this.$loading = true;
      this.$http
        .get("/logout")
        .then(res => {
          const resData = res.returnData;
          const code = +resData.executeResult;
          if (code == 1) {
            window.location.href = 'http://bjt.beijing.gov.cn/renzheng/open/auth/authorize?client_id=2260&redirect_uri=http://fuwu.rsj.beijing.gov.cn/bjtssomobile/third/redirect&response_type=code&scope=user_info&state=http://fuwu.rsj.beijing.gov.cn/jycy/zyjswwwx/index.html';
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // editDetail编辑
    editDetail(){
      this.$router.push({name:'editDetail'});
    },
    // 跳转
    link(){
      this.$alert('敬请期待！！！')
    },
    // 编辑图片
    editPic() {
      this.dwxx.changFlag = this.changFlag;
      this.$router.push({
        path: "/person/baseInfo/uploadPic",
        query: this.dwxx
      });
    },
    /*  查询基本信息 */
    GET_unit() {
      this.$loading = true;
      this.$http.get("/dwgl/dwxxCx").then(res => {
        const resData = res.returnData;
        this.dwxx = resData.dwxx;
      })
      .finally(() => {
        this.$loading = false;
      });
    },
  },

  mounted() {
    // fix mobile height
    const eleHeight = this.$refs.user.offsetHeight || 0;
    const windowHeight = this.$store.state.winHeight;
    this.winHeight = `${Math.max(windowHeight, eleHeight)}px`;
  },
  created(){
    // 隐藏home按钮
    this.$store.commit("SET_VISIBLE_ALL", false);
    this.GET_unit();
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
  .container {
    .my_pic {
      width: 100%;
      height: 292px;
      background: url('~common/images/user/uerBg.png') 0 0 no-repeat;
      background-size: cover;
      display: flex;
      flex-wrap: wrap;
      .picL{
        width: 180px;
        height: 100%;
        img{
          height: 146px;
          width: 146px;
          margin: 72px 0 0 37px;
        }
      }
      .picR{
        width: 190px;
        flex: 1 0 auto;
        width: 190px;
        position: relative;
        padding: 72px 10px 0 40px;
        box-sizing: border-box;
        .baseNews{
          position: absolute;
          top: 32px;
          right: 32px;
          height: 38px;
          width: 38px;
        }
        p{
          max-height: 120px;
          line-height: 1.2;
          margin: 19px 0;
          font-size: 34px;
          color: #fff;
          overflow: hidden;
          .name{
            display: inline-block;
            width: 150px;
            height: 54px;
            line-height: 54px;
            font-size: 30px;
            background: url('~common/images/user/user.png') 0 10px no-repeat;
            background-size: 26px;
            padding-left: 40px;
          }
          .tel {
            display: inline-block;
            width: auto;
            height: 54px;
            line-height: 54px;
            font-size: 30px;
            background: url('~common/images/user/phone.png') 0 10px no-repeat;
            background-size: 26px;
            padding-left: 40px;
          }
        }
      }
    }
    .iContent {
      overflow: hidden;
      .firstMode{
        margin: 20px 0;
        background-color: #fff;
        box-sizing: border-box;
        font-size: 34px;
        font-weight: 500;
        p{
          width: 90%;
          height: 84px;
          line-height: 84px;
          margin: 0 34px;
          color: #333333;
          box-sizing: border-box;
          border-bottom: 2px solid #dbdbdb;
          background: url("~common/images/user/myTest.png") 0 center
            no-repeat;
          background-size: 34px;
          padding-left: 56px;
        }
        .test{
          display: flex;
          flex-wrap: wrap;
          .test_item {
            flex: 1;
            height: 200px;
            padding-top: 136px;
            text-align: center;
            box-sizing: border-box;
            font-size: 30px;
            color: #333;
            &.item1{
              background: url("~common/images/user/msgj.png") center 34px
                no-repeat;
              background-size: 84px;
            }
            &.item2{
              background: url("~common/images/user/bsgj.png") center 34px
                no-repeat;
              background-size: 84px;
            }
            &.item3{
              background: url("~common/images/user/zdgj.png") center 34px
                no-repeat;
              background-size: 84px;
            }
          }
        }
      }
      .my_title {
        width: 100%;
          height: 116px;
          line-height: 116px;
        background-color: #fff;
        box-sizing: border-box;
        position: relative;
        p {
          width: 90%;
          height: 116px;
          line-height: 116px;
          margin: 0 34px;
          color: #333333;
          box-sizing: border-box;
          font-size: $font-size-user * 2;
          // border-bottom: 2px solid #dbdbdb;
          padding-left: 56px;
          &.myjl2 {
            background: url("~common/images/user/myGuide.png") 0 center
              no-repeat;
            background-size: 34px;
          }
          &.myjl3 {
            background: url("~common/images/user/myJob.png") 0 center
              no-repeat;
            background-size: 34px;
          }
          &.myjl4 {
            background: url("~common/images/user/polity.png") 0 center
              no-repeat;
            background-size: 34px;
          }
          &.myjl5 {
            background: url("~common/images/user/Other.png") 0 center
              no-repeat;
            background-size: 34px;
          }
        }
        p::after {
          content: '';
          position: absolute;
          right: 34px;
          width: $height-label * 4;
          height: 84px;
          line-height: $height-label * 12;
          background: url("~common/images/go.png") $radius-base2 center
            no-repeat;
          background-size: $radius-base2 * 2;
          padding-right: $height-width_line;
        }
      }
      .signOut{
        width: 100%;
        margin-top: 10px;
        height: $height-label * 12;
        line-height: $height-label * 12;
        background-color: #ffffff;
        border-bottom: 2px solid #dbdbdb;
        box-sizing: border-box;
        font-size: $font-size-user * 2;
        text-align: center;
        font-weight:600;
      }
    }
  }
</style>
